<template>
    <view>
        <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
            <uni-group title="-请填写资料" top="0" >
                <uni-forms-item required label="姓名" name="name">
                    <uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请填写姓名"></uni-easyinput>
                </uni-forms-item>
				<uni-forms-item name="info" required label="申请理由">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.info" placeholder="请填写您的理由"></uni-easyinput>
				</uni-forms-item>
                <uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
            </uni-group>
            <view>
                <button class="btn" @click="submitForm('form')"><span style="color:white">马上提交</span></button>
            </view>
        </uni-forms>
    </view>
</template>

<script>

import { uniForms } from "@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue";
import { uniFormsItem } from "@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue";
import { uniGroup } from '@dcloudio/uni-ui/lib/uni-group/uni-group.vue';
import { uniEasyinput, uniDataCheckbox } from '@dcloudio/uni-ui';
export default {
    data() {
        return {
            value: 0,
            formData: {
                name:'',
				tel: '',
				info: '',
			},
            rules: {
                name: {
					rules: [{
						required: true,
						errorMessage: '请输入用户名'
					}]
				},
				info: {
					rules: [{
						required: true,
						errorMessage: '请输入维修地址'
					}]
				},
            },
        }
    },
    
    components: {
        uniForms, 
        uniFormsItem,
        uniGroup,
        uniEasyinput,
        uniDataCheckbox
    },
    methods: {
        submitForm(form) {
			this.$refs[form]
			.submit()
			.then(res => {
				console.log('表单的值：', res)
				uni.showToast({
					title: '上传成功'
				})
			})
			.catch(errors => {
				console.error('验证失败：', errors)
			})
		},
        //重置表单 。原生的组件input组件不能重置表单
		resetForm() {
			this.$refs.form.resetFields()
		},
        change(e) {
            console.log('e',e);
        }
    },
}
</script>

<style>
	.uni-input-border {
		padding: 0 10px;
		height: 35px;
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}
	.btn {
		width: 200px;
        height: 45px;
		background-color: #51c4d3;
	}
</style>